{% extends "management/base.html" %}
{% block title %}查看图书{% endblock %}

{% block content %}
    <div class="container py-4">
        <div class="row">
            <!-- 左侧分类导航 -->
            <div class="col-md-3">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">图书分类</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="{% url 'book_list' 'all' %}"
                           class="list-group-item list-group-item-action d-flex align-items-center"
                           id="id_category_all">
                            <i class="bi bi-collection me-2"></i>
                            全部图书
                        </a>
                        {% for category in category_list %}
                            <a href="{% url 'book_list' category %}"
                               class="list-group-item list-group-item-action d-flex align-items-center"
                               id="id_category_{{ category }}">
                                <i class="bi bi-book me-2"></i>
                                {{ category }}
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- 右侧图书列表 -->
            <div class="col-md-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="text-primary">
                        {% if query_category == 'all' %}
                            所有图书
                        {% else %}
                            {{ query_category }}类图书
                        {% endif %}
                    </h3>
                    <span class="badge bg-secondary">
                    共 {{ book_list.paginator.count }} 本
                </span>
                </div>

                <!-- 图书表格 -->
                <div class="card shadow-sm">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th scope="col" class="text-center">#</th>
                                <th scope="col">书名</th>
                                <th scope="col">作者</th>
                                <th scope="col">出版日期</th>
                                <th scope="col" class="text-end">定价</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for book in book_list %}
                                <tr class="align-middle">
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>
                                        {% comment %} 这里 的 book_detail 是 urls.py 中的 name {% endcomment %}
                                        <a href="{% url 'book_list' book.id %}"
                                           class="text-decoration-none text-primary fw-medium">
                                            {{ book.name }}
                                        </a>
                                    </td>
                                    <td>{{ book.author }}</td>
                                    <td>{{ book.publish_date|date:"Y-m-d" }}</td>
                                    <td class="text-end">
                                        <span class="badge bg-success bg-opacity-10 text-success">
                                            ¥{{ book.price|floatformat:2 }}
                                        </span>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="bi bi-emoji-frown fs-1 d-block mb-2"></i>
                                            <p class="mb-0">暂无图书</p>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页导航 -->
                    {% if book_list.paginator.num_pages > 1 %}
                        <div class="card-footer py-3">
                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                <div class="mb-2 mb-md-0">
                            <span class="text-muted">
                                第 {{ book_list.number }} / {{ book_list.paginator.num_pages }} 页
                            </span>
                                </div>

                                <nav aria-label="分页导航">
                                    <ul class="pagination mb-0">
                                        <!-- 上一页 -->
                                        <li class="page-item {% if not book_list.has_previous %}disabled{% endif %}">
                                            <a class="page-link"
                                               href="?{% url 'book_list' query_category %}{% if book_list.has_previous %}&page={{ book_list.previous_page_number }}{% endif %}"
                                               aria-label="上一页">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="visually-hidden">上一页</span>
                                            </a>
                                        </li>

                                        <!-- 页码 -->
                                        {% for num in book_list.paginator.page_range %}
                                            {% if book_list.number == num %}
                                                <li class="page-item active" aria-current="page">
                                                    <span class="page-link">{{ num }}</span>
                                                </li>
                                            {% else %}
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       href="?{% url 'book_list' query_category %}&page={{ num }}">
                                                        {{ num }}
                                                    </a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        <!-- 下一页 -->
                                        <li class="page-item {% if not book_list.has_next %}disabled{% endif %}">
                                            <a class="page-link"
                                               href="?{% url 'book_list' query_category %}{% if book_list.has_next %}&page={{ book_list.next_page_number }}{% endif %}"
                                               aria-label="下一页">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="visually-hidden">下一页</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 激活当前分类的脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const activeElement = document.getElementById('id_category_{{ query_category }}');
            if (activeElement) {
                activeElement.classList.add('active');
                activeElement.classList.add('bg-primary');
                activeElement.classList.add('text-white');
            }
        });
    </script>
{% endblock %}